<template>
  <el-dialog title="手动充值" v-model="dialogShow" width="500" center @close="close">
    <el-form ref="formRef" :rules="rule" :model="form" label-width="100px">
      <el-form-item label="到账方式">
        <el-radio-group v-model="form.rechargeMethod" @change="form.rechargeMethod = $event">
          <el-radio v-for="(item, index) in regArr" :key="index" :value="index">{{ item.title }}</el-radio>
        </el-radio-group>
        <p>{{ regArr[form.rechargeMethod].text }}到账（到账扣除服务费{{ regArr[form.rechargeMethod].value }}%）</p>
      </el-form-item>

      <el-form-item label="金额" prop="money">
        <el-input v-model="form.money" type="number" placeholder="请输入金额" />
      </el-form-item>
      <el-form-item label="备注" prop="remark">
        <el-input v-model="form.remark" type="textarea" maxlength="20" show-word-limit placeholder="请输入备注" />
      </el-form-item>
      <el-form-item>
        <el-button @click="close">取消</el-button>
        <el-button type="primary" @click="submit">确定</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>
<script setup>
import { ref, reactive, onMounted } from 'vue'
import { getRechargeConfig, postRechargeConfirm } from '@/api/shop.js'
import { dayjs, ElMessage } from 'element-plus'
const emits = defineEmits(['updateData'])
const dialogShow = ref(false)

const formRef = ref()
const regArr = reactive([
  { title: '次日到账', text: '次日凌晨四点前', value: '', key: 'NEXT_DAY' },
  { title: '实时到账', text: '充值后立即', value: '', key: 'SAME_DAY' }
])
const accountArr = reactive({
  ACCOUNT_MAX: 0,
  ACCOUNT_MIN: 0,
  ACCOUNT_OPEN: 0,
  ACCOUNT_CLOSE: 0
})
const form = reactive({
  shopId: 0,
  dealerId: 0,
  money: '',
  rechargeMethod: 0,
  remark: ''
})
const rule = {
  money: [
    { required: true, message: '请输入金额', trigger: 'blur' },

    {
      validator: (rule, value, callback) => {
        const money = Number(value)
        if (money < accountArr.ACCOUNT_MIN) {
          callback(new Error(`金额不能小于${accountArr.ACCOUNT_MIN}`))
        } else if (money > accountArr.ACCOUNT_MAX) {
          callback(new Error(`金额不能大于${accountArr.ACCOUNT_MAX}`))
        } else {
          callback()
        }
      },
      trigger: 'blur'
    }
  ]
}
const getCurrent = (data) => {
  dialogShow.value = true
  form.shopId = data.shopId
  form.dealerId = data.dealerId
}
const close = () => {
  dialogShow.value = false
  formRef.value.resetFields()
}
const getConfig = async () => {
  const resArr = await Promise.all([
    getRechargeConfig({ dictName: 'SYSTEM_CONFIG' }),
    getRechargeConfig({ dictName: 'ACCOUNT_CONFIG' })
  ])
  resArr[0].data.forEach((item) => {
    regArr.forEach((item2, index) => {
      console.log(item.dictValue)
      if (item.dictName === item2.key) regArr[index].value = (item.dictValue * 100).toFixed(1)
    })
  })
  resArr[1].data.forEach((item) => {
    accountArr[item.dictName] = item.dictValue
  })
}
onMounted(getConfig)
const submit = () => {
  formRef.value.validate(async (valid) => {
    if (valid) {
      const date = dayjs().format('HH:mm:ss')
      if (date < accountArr.ACCOUNT_OPEN || date > accountArr.ACCOUNT_CLOSE) {
        return ElMessage.error(`不在充值时间范围内,请在${accountArr.ACCOUNT_OPEN}-${accountArr.ACCOUNT_CLOSE}进行充值`)
      }
      const res = await postRechargeConfirm(form)
      if (res.code) return ElMessage.error(res.message)
      ElMessage.success('充值成功')
      emits('updateData')
      dialogShow.value = false
    }
  })
}
defineExpose({
  getCurrent
})
</script>
<style scoped lang="scss"></style>
